import React from 'react'
import { counterStore, computedStore } from './store/counter'
import { observer } from 'mobx-react-lite'
import useStore from './store/index'

function App() {
  // mobx 模块化：
  // 注意：解构赋值，到 store 实例对象就可以了，防止破坏响应式
  const { countStore, listStore } = useStore()

  return (
    <div>
      {/* 
        环境配置：
        1、一个通过 create-react-app 创建好的的 react 项目环境
        2、mobx 本身（安装 mobx）
          yarn add mobx
        3、一个链接 mobx 和 react 的中间部件（安装 mobx-react-lite）
          yarn add mobx-react-lite
      */}

      {/* 
        案例：使用 mobx 完成一个计数器
        一、mobx（详情见 store 下的 counter.js）：
          1、定义数据状态（state）
          2、数据响应式处理
          3、定义 action 函数（修改数据）
          4、实例化并导出实例
        二、react：
          1、导入 store 实例
            import { counterStore } from './store/counter'
          2、使用 store 中的数据
          3、修改 store 中的数据
          4、让组件视图响应数据变化
            导入：import { observer } from 'mobx-react-lite'
            包裹住App：export default observer(App)
      */}
      <h3>Mobx</h3>
      <h4>普通使用，计数器案例</h4>
      <div>mobx定义的数：{counterStore.count}</div>
      <button onClick={counterStore.addCount}>点击加一</button>

      {/* 
        computed：
        实现步骤：
          1、声明一个存在的数据
          2、定义 get 计算属性
          3、在 makeAutoObservable 方法中标记
      */}
      <h4>computed</h4>
      <div>mobx 里定义的原数组：</div>
      <div>
        {computedStore.list.map((item, index) => {
          return <span key={index}>{item}、</span>
        })}
      </div>
      <div>使用 mobx 中的 computed 筛选后的数组：</div>
      <div>
        {computedStore.filterList.map((item, index) => {
          return <span key={index}>{item}、</span>
        })}
      </div>
      <button onClick={computedStore.addList}>点击添加随机数</button>

      {/* 
        Mobx 模块化：
        详情看 store 中的 index.js
        实现步骤：
          1、拆分模块，每个模块定义自己独立的 state/actions
          2、在 store/index.js 中导入拆分的模块，进行模块组合
          3、使用 React 的 useContext 机制，导出 useStore 方法，供业务组件统一使用

        注意：使用 useStore 时，解构赋值，到 store 实例对象就可以了，防止破坏响应式
      */}
      <div>mobx 模块化后的countStore 中的数：{countStore.num}</div>
      <button onClick={countStore.addNum}>点击改变数</button>
      <div>
        mobx 模块化后的listStore 中的值：
        {listStore.list.map((item, index) => {
          return <span key={index}>{item}、</span>
        })}
      </div>
      <button onClick={listStore.addListValue}>点击改变值</button>
    </div>
  )
}

// observer 包裹App，实现 mobx 视图响应式
export default observer(App)
